import { getToken, setToken, removeToken, setTimeStamp } from '@/utils/auth'
import { login, getUserInfo, getUserDetailById } from '@/api/user.js'
// 状态
// 初始化的时候从缓存中读取状态 并赋值到初始化的状态上
// Vuex的持久化 如何实现 ？ Vuex和前端缓存相结合
const state = {
  token: getToken(), // 设置token为共享状态, 初始化vuex的时候就先从缓存中读取
  userInfo: {}, // 定义一个空的对象后边我要开发userInfo的属性给别的组件用 
}
// 修改状态
const mutations = {
  // 设置token
  setToken(state, token) {
    state.token = token // 将数据设置给vuex
    setToken(token) // vuex和缓存数据同步
  },
  // 删除缓存
  removeToken(state) {
    state.token = null // 删除vuex的token
    removeToken() // 先清除vuex的token再清除缓存数据的token
  },
  // 设置用户信息
  setUserInfo(state, result) {
    state.userInfo = result // 这样是响应式
    // state.userInfo = { ...result } // 这样也是响应式, 属于浅拷贝
    // state.userInfo['username'] = result // 这样才不是响应式
  },
  // 删除用户信息
  removeUserInfo(state) {
    state.userInfo = {}
  },
}
// 执行异步
const actions = {
  // 定义login action  也需要参数 调用action时 传递过来的参数
  // 登陆
  async login(context, data) {
    // const result = await login(data) // 实际上就是一个promise  result就是执行的结果
    // // axios默认给数据加了一层data, 在响应拦截器这边已经处理过了,所以不需要result.data.success
    // if (result.data.success) {
    //   // 表示登录接口调用成功 也就是意味着你的用户名和密码是正确的
    //   // 现在有用户token
    //   // actions 修改state 必须通过mutations
    //   context.commit('setToken', result.data.data)
    // }
    const result = await login(data) // 实际上就是一个promise  result就是执行的结果
    // axios默认给数据加了一层data, 在响应拦截器这边已经处理过了,所以不需要result.data.success
    // 现在有用户token
    // actions 修改state 必须通过mutations
    context.commit('setToken', result) // 储存token
    // 储存token之后储存当前时间戳
    setTimeStamp()
  },
  // 获取用户资料
  async getUserInfo(context) {
    const result = await getUserInfo()  // result就是用户的基本资料
    const baseInfo = await getUserDetailById(result.userId) // 为了获取用户的详细资料, 头像等等
    const baseResult = { ...result, ...baseInfo } // 将两个接口结果合并
    context.commit('setUserInfo', baseResult) // 将整个的个人信息设置到用户的vuex数据中
    return result // 这里为什么返回, 为后面做权限管理埋下伏笔
  },
  // 退出登陆
  logout(context) {
    // 删除token
    context.commit('removeToken') // 不仅仅删除了vuex中的 还删除了缓存中的
    // 删除用户资料
    context.commit('removeUserInfo') // 删除用户信息
  },
}
// 其中app.js模块和settings.js模块，功能已经完备，不需要再进行修改。
// user.js模块是我们后期需要重点开发的内容，所以这里我们将user.js里面的内容删除，并且导出一个默认配置
export default {
  namespaced: true,
  state,
  mutations,
  actions
}
